﻿<div class="modal-dialog modal-box">
    <div class="modal-title">
        <span class="title-text">Sign-in assistance</span>
        <button type="button" class="dismiss-button" data-dismiss="modal" data-bind="click: resetViewModel" aria-label="Close">
            <i class="ms-Icon ms-Icon--Cancel" aria-hidden="true"></i>
        </button>
    </div>
    <div class="modal-body">
        <div class="tag-node">
            <span class="title-text">
                Forgot the Microsoft account you used to sign-in?
            </span>
        </div>
        <div class="text-label">
            @ViewHelpers.AjaxAntiForgeryToken(Html)
            @using (Html.BeginForm())
            {
                <div id="assistance-form" data-bind="visible: !emailNotificationSent()">
                    <div id="username-entry" data-bind="visible: getUsername()">
                        <div class="form-group">
                            <div>
                                If you cannot remember which Microsoft account you used to sign-in to @this.Config.Current.Brand, we can help you out.
                            </div>
                            <div class="text-row">
                                <label for="newOwnerUserName">Please enter the username</label>
                                <input type="text" id="usernameForAssistance" name="usernameForAssistance" data-bind="value: usernameForAssistance" aria-required="true" class="form-control input-brand" />
                                <div class="text-danger form-error-message" data-bind="text: message"></div>
                            </div>
                        </div>
                        <div class="form-button-node username-submit">
                            <input type="submit" class="btn btn-brand btn-block action-button" data-bind="click: getEmailAddress" value="Next" />
                        </div>
                    </div>
                    <div id="email-entry" data-bind="visible: getEmail()">
                        <div class="form-group">
                            <div>
                                Please enter the email address linked to account <span style="font-weight: bold" data-bind="text: usernameForAssistance()"/> :
                            </div>
                            <div class="text-row" data-bind="text: formattedEmailAddress()"></div>
                            <div class="text-row">
                                <input class="form-control input-brand" type="text" id="emailAddress" name="emailAddress" data-bind="value: inputEmailAddress" aria-required="true" />
                            </div>
                            <div class="text-danger form-error-message" data-bind="text: message"></div>
                        </div>
                        <div class="form-button-node email-submit">
                            <input type="submit" class="btn btn-brand btn-block action-button" data-bind="click: sendEmailNotification" value="Next" />
                        </div>
                    </div>
                </div>
                <div id="notification-sent" data-bind="visible: emailNotificationSent()">
                    <div>
                        Thanks for providing the details. We have sent the sign-in account details to the email address linked to your account:
                        <div class="text-row">
                            <span style="font-weight: bold" data-bind="text: usernameForAssistance()"></span>
                        </div>
                    </div>
                    <div class="form-button-node close-button">
                        <button type="button" class="btn btn-brand btn-block action-button" data-dismiss="modal" data-bind="click: resetViewModel" aria-label="Close">
                            Close
                        </button>
                    </div>
                </div>
            }
        </div>
    </div>
</div>